<template>
    <el-form-item :label="$t('storage.http_protocol')">
        <el-radio-group v-model="storage.alist_http_protocol">
            <el-radio v-for="(item, index) in http_protocols" :key="index" :label="item.value" border>{{ item.title }}</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item :label="$t('storage.http_domain')">
        <el-input v-model="storage.alist_http_domain" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.path')">
        <el-input v-model="storage.alist_savepath" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.username')">
        <el-input v-model="storage.alist_username" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.password')">
        <el-input v-model="storage.alist_password" clearable></el-input>
    </el-form-item>
</template>
<script setup>
import { reactive, watch } from 'vue';
import { useStore } from 'vuex';
// 使用 Vuex store
const store = useStore();
// 接收父组件传递的 HTTP 协议选项
const props = defineProps({
    http_protocols: Array
});
// 定义用于发射更新事件的方法
const emit = defineEmits(['update-storage']);
// 本地存储配置的响应式对象
const storage = reactive({
    alist_http_protocol: '',
    alist_http_domain: '',
    alist_savepath: '',
    alist_username: '',
    alist_password: '',
});
// 监听 storage 对象的变化并发射 update-storage 事件
// 这允许子组件将状态更改通知给父组件
watch(storage, (newValue) => {
    emit('update-storage', newValue);
}, { deep: true });
// 监听 store.state.system.store对象变化时赋值
watch(() => store.state.system.storage, (newStorage) => {
    storage.alist_http_protocol = newStorage.alist_http_protocol;
    storage.alist_http_domain = newStorage.alist_http_domain;
    storage.alist_savepath = newStorage.alist_savepath;
    storage.alist_username = newStorage.alist_username;
    storage.alist_password = newStorage.alist_password;
}, { deep: true, immediate: true });
</script>